<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>代理管理</el-breadcrumb-item>
			<el-breadcrumb-item>代理列表（超级管理）</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card>
			<div class="whole-flex-center-between whole-top-handle">
				<div class="search-area">
					<el-button size="small" @click="clearFilter" style="margin-right:20px">重置所有筛选</el-button>
					<el-select size="small" v-model="statusValue" class="margin-r-5" placeholder="选择商户状态"
						:popper-append-to-body="false">
						<el-option v-for="item in statusOptions" :key="item.value" :label="item.label"
							:value="item.value"></el-option>
					</el-select>
					<!-- <el-col :span="4" class="margin-r-5">
                        <el-input size="small" v-model="nameValue" placeholder="要查询的商户名" clearable></el-input>
                    </el-col> -->
					<el-button size="small" @click="getUserList(1,statusValue)">查询</el-button>
				</div>
			</div>
			<el-row>
				<el-button size="small" type="primary" @click="addAgentDialogVisible = true">新增</el-button>
			</el-row>
			<div class="whole-flow-table-box">
				<el-table ref="myTable" :data="userList" style="width: 100%" stripe border>
					<el-table-column align="center" type="selection" width="50"></el-table-column>
					<el-table-column align="center" prop="id" label="UID" width="60"></el-table-column>
					<el-table-column align="center" prop="admin_user.account" label="登录账号"></el-table-column>
					<el-table-column align="center" prop="name" label="姓名" width="100"></el-table-column>
					<el-table-column align="center" prop="link_man" label="联系人" width="100"></el-table-column>
					<el-table-column align="center" prop="mobile" label="联系方式"></el-table-column>
					<el-table-column align="center" prop="money" label="佣金" width="150"></el-table-column>
					<el-table-column align="center" prop="rate" label="费率" width="80"></el-table-column>
					<el-table-column align="center" prop="status" label="状态" width="70">
						<template slot-scope="scope">
							<el-tag v-if="scope.row.status==0" type="info" size="mini">待审</el-tag>
							<el-tag v-else-if="scope.row.status==1" type="success" size="mini">成功</el-tag>
							<el-tag v-else type="danger" size="mini">失败</el-tag>
						</template>
					</el-table-column>
					<el-table-column align="center" prop="create_time" label="创建时间"></el-table-column>
					<el-table-column align="center" label="操作" width="300">
						<template slot-scope="scope">
							<!-- <el-button plain size="mini" @click="del(scope.row.id)">删除</el-button> -->
						</template>
					</el-table-column>
				</el-table>
				<div class="whole-pagination">
					<el-pagination :page-size="size" background layout="prev, pager, next" :total="count"
						@current-change="currentPage"></el-pagination>
				</div>
				<el-dialog title="添加代理" :visible.sync="addAgentDialogVisible" width="500px" :before-close="handleClose">
					<div>
						<el-form ref="addAgentRef" :rules="addAgentRules" :model="addAgentFrom" label-width="150px">
							<el-form-item label="代理商名称：" prop="name">
								<el-input v-model="addAgentFrom.name"></el-input>
							</el-form-item>
							<el-form-item label="代理商电话：" prop="mobile">
								<el-input v-model="addAgentFrom.mobile"></el-input>
							</el-form-item>
							<el-form-item label="联系人：" prop="link_man">
								<el-input v-model="addAgentFrom.link_man"></el-input>
							</el-form-item>
							<el-form-item label="费率：" prop="rate">
								<el-input v-model="addAgentFrom.rate"></el-input>
							</el-form-item>
						</el-form>
					</div>
					<span slot="footer" class="dialog-footer">
						<el-button @click="addAgentDialogVisible = false">取 消</el-button>
						<el-button type="primary" @click="confirmAddAgent(addAgentFrom)">确 定</el-button>
					</span>
				</el-dialog>
			</div>
		</el-card>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				userList: [],
				count: 0,
				size: 10,
				page: 1,
				imgList: [],
				// 可搜索的状态列表
				statusOptions: [{
						value: 0,
						label: "待审",
					},
					{
						value: 1,
						label: "成功",
					},
					{
						value: 2,
						label: "失败",
					},
				],
				statusValue: '',
				// 添加代理上弹框显隐
				addAgentDialogVisible: false,
				// 添加代理商form表单
				addAgentFrom: {},
				addAgentRules: {
					name: [{
						required: true,
						message: '请输入代理商名字',
						trigger: 'blur'
					}, ],
					mobile: [{
						required: true,
						message: '请输入代理商手机号',
						trigger: 'blur'
					}, ],
					link_man: [{
						required: true,
						message: '请输入联系人',
						trigger: 'blur'
					}, ],
					rate: [{
						required: true,
						message: '请输入费率',
						trigger: 'blur'
					}, ]
				}
			};
		},
		created() {
			this.getUserList(1);
		},
		methods: {
			// 重置筛选
			clearFilter() {
				this.$refs.myTable.clearFilter();
				this.statusValue = "";
				// this.nameValue = "";
				this.getUserList(1);
			},
			handleClose(done) {
				this.$confirm("确认关闭？")
					.then((_) => {
						done();
					})
					.catch((_) => {});
			},
			// 获取代理商列表列表
			getUserList(page, status) {
				let _this = this;
				this.$axios({
					url: "/admin/master/getAgent",
					data: {
						offset: page,
						limit: this.size,
						status: status == undefined ? '' : status
					},
					success(res) {
						if (res.data.code == 200) {
							_this.userList = res.data.content.data;
							_this.count = Number(res.data.content.count);
						}
					},
				});
			},
			currentPage(page) {
				// if (_this.statusValue == undefined) {
				//     sta = 0;
				// } else {
				//     sta = _this.orderExcelStatus;
				// }
				this.getUserList(page, this.statusValue);
			},
			confirmAddAgent(form) {
				let _this = this;
				this.$refs['addAgentRef'].validate((valid) => {
					if (valid) {
						_this.$axios({
							url: "/admin/master/setAgent",
							data: {
								name: form.name,
								mobile: form.mobile,
								link_man: form.link_man,
								account: form.mobile,
								password: 123456,
								rate: form.rate
							},
							needToken: true,
							success(res) {
								if (res.data.code == 200) {
									_this.$message({
										message: res.data.msg,
										type: 'success'
									});
									_this.$refs.addAgentRef.resetFields();
									_this.addAgentDialogVisible = false;
									this.getUserList(1);
								} else {
									_this.$message.error(res.data.msg);
								}
							},
						});
					}
				});
			},
			del(id){
				console.log(id)
			}
		},
	};
</script>
<style scoped>
	.shrink-box {
		width: 100%;
		font-size: 0;
	}

	.shrink-box>>>label {
		width: 140px;
		color: #99a9bf;
	}

	.shrink-box .el-form-item {
		margin-right: 0;
		margin-bottom: 0;
		width: 33.333333%;
	}

	.a {
		vertical-align: middle;
	}

	.imgs-con {
		height: 450px;
		overflow: auto;
		display: flex;
		flex-wrap: wrap;
	}

	.imgs-con>.card {
		margin-right: 10px;
		margin-bottom: 10px;
		text-align: center;
		font-size: 12px;
	}

	.imgs-con>.card:nth-child(4n) {
		margin-right: 0;
	}
</style>
